<!--
 * @Descripttion: 小程序链接
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 14:25:18
-->
<template>
  <div class="lb-sys-sprolink">
    <top-nav></top-nav>
    <div class="page-main">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          v-for="(item, index) in pageList"
          :key="index"
          :title="item.title"
          :name="index"
        >
          <div>
            <span>地址：</span>
            <span class="green">{{ item.url }}</span>
          </div>
          <div v-for="(el, i) in item.query" :key="i">
            <span>参数[{{ i + 1 }}]：</span>
            <span class="green">{{ el.ename }} </span>
            <span> {{ el.zname }} </span>
            <span v-if="el.query.length">
              （<span v-for="(j, k) in el.query" :key="k">
                <span class="green"> {{ j.ename }}</span>
                <span class="blue"> {{ j.zname }}，</span> </span
              >）
            </span>
            <span class="red" v-if="el.isRequired"> --必填</span>
            <span class="blue" v-else> --选填（{{ el.tips }}）</span>
          </div>
          <div>
            <span>例如：</span>
            <p v-for="(i, j) in item.example" :key="j">{{ i }}</p>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeNames: [0, 1, 2],
      pageList: [
        {
          title: '首页',
          url: 'pages/user/home',
          query: [
            {
              ename: 'staff_id',
              zname: '员工ID ',
              isRequired: true,
              tips: '',
              query: []
            },
            {
              ename: 'pid',
              zname: '绑定分销关系的上级用户ID ',
              isRequired: true,
              tips: '',
              query: []
            },
            {
              ename: 'key',
              zname: `页面类型（1=>${this.$t('menu.BusinessCard')}；2=>${this.$t('menu.Malls')}；3=>${this.$t('menu.Dynamic')}；4=>${this.$t('menu.Website')}；）`,
              isRequired: true,
              tips: '',
              query: []
            },
            {
              ename: 'type',
              zname: `记录用户来源所需（2=>${this.$t('menu.Malls')}；3=>${this.$t('menu.Dynamic')}；4=>${this.$t('menu.BusinessCard')}；5=>${this.$t('menu.Website')}；）`,
              isRequired: true,
              tips: '',
              query: []
            }
          ],
          example: [
            `${this.$t('menu.BusinessCard')}首页：pages/user/home?staff_id=1&pid=2&key=1&type=4`,
            `${this.$t('menu.Malls')}首页：pages/user/home?staff_id=1&pid=2&key=2&type=2`,
            `${this.$t('menu.Dynamic')}首页：pages/user/home?staff_id=1&pid=2&key=3&type=3`,
            `${this.$t('menu.Website')}首页：pages/user/home?staff_id=1&pid=2&key=4&type=5`
          ]
        },
        {
          title: '商品详情页面',
          url: 'pages/shop/detail',
          query: [
            {
              ename: 'id',
              zname: '商品ID ',
              isRequired: true,
              tips: '',
              query: []
            },
            {
              ename: 'staff_id ',
              zname: '员工ID ',
              isRequired: true,
              tips: ' ',
              query: []
            },
            {
              ename: 'pid ',
              zname: '绑定分销关系的上级用户ID ',
              isRequired: true,
              tips: ' ',
              query: []
            },
            {
              ename: 'type ',
              zname: '记录用户来源所需,默认为2 ',
              isRequired: true,
              tips: ' ',
              query: []
            }
          ],
          example: ['pages/shop/detail?id=1&staff_id=2&pid=3&type=2']
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-sys-sprolink {
  width: 100%;
  .green {
    color: #4db14d;
  }
  .blue {
    color: #259fdc;
  }
  .red {
    color: #f00;
  }
}
</style>
